<template>
  <div class="test-page">
    <h1>Element Plus 组件测试</h1>
    
    <div class="test-section">
      <h2>消息组件测试</h2>
      <el-button @click="testSuccess">成功消息</el-button>
      <el-button @click="testError">错误消息</el-button>
      <el-button @click="testWarning">警告消息</el-button>
      <el-button @click="testInfo">信息消息</el-button>
    </div>
    
    <div class="test-section">
      <h2>确认框测试</h2>
      <el-button @click="testConfirm">测试确认框</el-button>
      <el-button @click="testAlert">测试警告框</el-button>
    </div>
    
    <div class="test-section">
      <h2>表单组件测试</h2>
      <el-form :model="form" label-width="80px">
        <el-form-item label="用户名">
          <el-input v-model="form.username" placeholder="请输入用户名"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="form.password" type="password" placeholder="请输入密码"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="testForm">提交表单</el-button>
        </el-form-item>
      </el-form>
    </div>
    
    <div class="test-section">
      <h2>图标测试</h2>
      <el-icon><User /></el-icon>
      <el-icon><Lock /></el-icon>
      <el-icon><Close /></el-icon>
    </div>
  </div>
</template>

<script>
import { ElMessage, ElMessageBox } from 'element-plus'

export default {
  name: 'TestElement',
  data() {
    return {
      form: {
        username: '',
        password: ''
      }
    }
  },
  methods: {
    testSuccess() {
      try {
        ElMessage.success('这是一个成功消息')
      } catch (error) {
        console.error('消息组件错误:', error)
        alert('消息组件测试失败: ' + error.message)
      }
    },
    testError() {
      try {
        ElMessage.error('这是一个错误消息')
      } catch (error) {
        console.error('消息组件错误:', error)
        alert('消息组件测试失败: ' + error.message)
      }
    },
    testWarning() {
      try {
        ElMessage.warning('这是一个警告消息')
      } catch (error) {
        console.error('消息组件错误:', error)
        alert('消息组件测试失败: ' + error.message)
      }
    },
    testInfo() {
      try {
        ElMessage.info('这是一个信息消息')
      } catch (error) {
        console.error('消息组件错误:', error)
        alert('消息组件测试失败: ' + error.message)
      }
    },
    testConfirm() {
      try {
        ElMessageBox.confirm('确定要执行此操作吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          ElMessage.success('用户点击了确定')
        }).catch(() => {
          ElMessage.info('用户点击了取消')
        })
      } catch (error) {
        console.error('确认框错误:', error)
        alert('确认框测试失败: ' + error.message)
      }
    },
    testAlert() {
      try {
        ElMessageBox.alert('这是一个警告信息', '警告', {
          confirmButtonText: '确定'
        })
      } catch (error) {
        console.error('警告框错误:', error)
        alert('警告框测试失败: ' + error.message)
      }
    },
    testForm() {
      try {
        if (this.form.username && this.form.password) {
          ElMessage.success('表单提交成功')
        } else {
          ElMessage.error('请填写完整信息')
        }
      } catch (error) {
        console.error('表单测试错误:', error)
        alert('表单测试失败: ' + error.message)
      }
    }
  }
}
</script>

<style scoped>
.test-page {
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;
}

.test-section {
  margin-bottom: 30px;
  padding: 20px;
  border: 1px solid #eee;
  border-radius: 8px;
}

.test-section h2 {
  margin-bottom: 15px;
  color: #333;
}

.el-button {
  margin-right: 10px;
  margin-bottom: 10px;
}

.el-icon {
  font-size: 24px;
  margin-right: 10px;
  color: #409eff;
}
</style>
